<template>
  <el-menu
    :collapse="isCollapse"
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
    :default-active="$route.path"
    router
    class="aside-menu">
    
    <el-menu-item index="/admin/dashboard">
      <el-icon><DataLine /></el-icon>
      <span>数据概览</span>
    </el-menu-item>

    <el-sub-menu index="1">
      <template #title>
        <el-icon><Document /></el-icon>
        <span>ְ职位管理</span>
      </template>
      <el-menu-item index="/admin/positions/list">ְ职位列表</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>
        <el-icon><User /></el-icon>
        <span>简历管理</span>
      </template>
      <el-menu-item index="/admin/resumes/list">简历列表</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <el-icon><Calendar /></el-icon>
        <span>面试管理</span>
      </template>
      <el-menu-item index="/admin/interview/schedule">面试安排</el-menu-item>
      <el-menu-item index="/admin/interview/feedback">面试反馈</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="4">
      <template #title>
        <el-icon><UserFilled /></el-icon>
        <span>人才库管理</span>
      </template>
      <el-menu-item index="/admin/talents/list">人才列表</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="5" v-if="userInfo.role === 'super_admin'">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>系统设置</span>
      </template>
      <el-menu-item index="/admin/department/list">部门管理</el-menu-item>
      <el-menu-item index="/admin/user/list">用户管理</el-menu-item>
      <el-menu-item index="/admin/admin/list">管理员管理</el-menu-item>
    </el-sub-menu>

  </el-menu>
</template>

<script setup>
import { inject } from 'vue';
const isCollapse=inject('isCollapse')
const userInfo = JSON.parse(localStorage.getItem('admin'))
</script>

<style scoped>
.aside-menu {
  height: 100%;
  border-right: none;
}

.aside-menu:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu--collapse {
  width: 64px;
}

:deep(.el-sub-menu__title) {
  padding-left: 20px !important;
}

:deep(.el-menu-item) {
  padding-left: 20px !important;
}

:deep(.el-menu-item.is-active) {
  background-color: #263445 !important;
}
</style>
